import React, { useEffect } from "react";
import {
  Col,
  Drawer,
  Select,
  Form,
  Input,
  Divider,
  Row,
  Cascader,
  Upload,
  Button,
} from "antd";
import { UploadOutlined } from "@ant-design/icons";
import * as publicData from "../../utils/staticData";
import { useTranslation, Trans } from "react-i18next"; // 引入react-i18next

import style from "./viewbene.module.scss";

export default function ViewBeneficiary(props) {
  const { checkOpen, showCheckDrawer, onCheckClose } = props;
  const { t, i18n } = useTranslation(); // 结构拿出方法
  const [form] = Form.useForm();

  const { Option } = Select;
  const { SHOW_CHILD } = Cascader;

  // 远程搜索地区银行识别码
  const options = [
    {
      value: "0011",
      label: "国库",
    },
    {
      value: "003",
      label: "渣打银行（香港）有限公司",
    },
    {
      value: "004",
      label: "香港上海汇丰银行有限公司",
    },
    {
      value: "005",
      label: "东方汇理银行",
    },
    {
      value: "006",
      label: "东方汇理银行",
    },
    {
      value: "007",
      label: "东方汇理银行",
    },
    {
      value: "008",
      label: "东方汇理银行",
    },
  ];
  // 回显开关
  //   let flag = _.isEmpty(echoData);

  const testDATA = {
    largeAmount: "1321321",
    CardType: "1",
    Identification: ["0011"],
    accountCountry: "jack",
    city: ["110000", "110000"],
    currency: "HKD",
    detailAddress: "211221221",
    name: "12",
    swiftcode: "21321",
    transferAmount: "232132",
    type: "private",
    url: "13213",
  };

  const uploadButton = (
    <>
      <Button icon={<UploadOutlined />}>{t("form.upload")}</Button>
    </>
  );
  // 数据回显;
  useEffect(() => {
    // if (!flag) {
    form.setFieldsValue({
      ...testDATA,
    });
    // }
  });

  return (
    <Drawer
      // title="返回"
      title={t("buttons.Return")}
      width={"100%"}
      height={"100%"}
      onClose={() => {
        onCheckClose(false);
      }}
      placement="top"
      open={checkOpen}
      className={style.accountdrawer}
      bodyStyle={{
        paddingBottom: 80,
      }}
    >
      <Divider orientation="left" orientationMargin="-5px">
        {/* 基本信息 */}
        {t("form.essentialinformation")}
      </Divider>
      <Form
        disabled
        form={form}
        className={style.accountform}
        allowClear
        labelAlign={"right"}
      >
        <Row gutter={24}>
          <Col span={6}>
            <Form.Item
              name="Identification"
              label={t("form.BankCountry")}
              // label="银行所在国家"
              // tooltip="系统会根据所选国家判断境内/境外账户"
              tooltip={t("form.BankCountryMessage")}
              rules={[
                {
                  required: true,
                  // message: "银行所在国家",
                },
              ]}
            >
              <Cascader
                className={style.addcascader}
                bordered={false}
                options={options}
                changeOnSelect
                showCheckedStrategy={SHOW_CHILD}
                // showSearch={{
                //   filter,
                // }}
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name="url"
              // label="客户类型"
              label={t("form.Customertype")}
              rules={[
                {
                  required: true,
                  // message: "请选择客户类型",
                },
              ]}
            >
              <Select
                // placeholder="请选择账户类型"
                allowClear
                showArrow={false}
                bordered={false}
              >
                <Option value="private">对私</Option>
                <Option value="public">对公</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name="Identification"
              label={t("form.CustomerCountry")}
              // label="客户所在国家"
              rules={[
                {
                  required: true,
                  // message: "客户所在国家",
                },
              ]}
            >
              <Cascader
                className={style.addcascader}
                bordered={false}
                options={options}
                changeOnSelect
                showCheckedStrategy={SHOW_CHILD}
                // showSearch={{
                //   filter,
                // }}
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name="type"
              // label="币种"
              label={t("form.currency")}
              rules={[
                {
                  required: true,
                  // message: "请选择币种",
                },
              ]}
            >
              <Select
                bordered={false}
                // placeholder="请选择币种"
                showArrow={false}
                allowClear
              >
                <Option value="private">对私</Option>
                <Option value="public">对公</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={24}>
          <Col span={6}>
            <Form.Item
              name="name"
              // label="账户名称"
              label={t("form.accountTitle")}
              //   validateStatus="error"
              //   help="非国内账户只允许英文字母数字空格"
              rules={[
                {
                  required: true,
                  // message: "请输入账户名称",
                },
              ]}
            >
              <Input bordered={false} allowClear />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name="currency"
              label={t("form.AccountNoAdd")}
              // label="账户账号（欧美地区IBAN）"
              rules={[
                {
                  required: true,
                  // message: "请输入账户账号",
                },
              ]}
            >
              <Input bordered={false} placeholder="请输入账户账号" allowClear />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name="city"
              label={t("form.AccountType")}
              // label="账户类型"
              rules={[
                {
                  required: true,
                  // message: "请输入账户类型",
                },
              ]}
            >
              <Cascader
                className={style.addcascader}
                bordered={false}
                options={publicData.cityData}
                changeOnSelect
                showCheckedStrategy={SHOW_CHILD}
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name="CardType"
              // label="合作有效期"
              label={t("form.Validitycooperation")}
              rules={[
                {
                  required: true,
                  // message: "请输入合作有效期",
                },
              ]}
            >
              <Select
                showArrow={false}
                bordered={false}
                // placeholder="请输入合作有效期"
                allowClear
              >
                {publicData.CardType.map((district) => (
                  <Option key={district.value}>{district.name}</Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={24}>
          <Col span={6}>
            <Form.Item
              name="largeAmount"
              label={t("form.IdentificationNumber")}
              //  label="证件号码"
            >
              <Input
                bordered={false}
                style={{
                  width: "100%",
                }}
                allowClear
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name="swiftcode"
              // label="银行名称"
              label={t("form.Bankname")}
              rules={[
                {
                  required: true,
                  message: "请输入银行名称",
                },
              ]}
            >
              <Input
                bordered={false}
                style={{
                  width: "100%",
                }}
                allowClear
                // placeholder="请输入银行名称"
              />
            </Form.Item>
          </Col>

          <Col span={6}>
            <Form.Item
              name="transferAmount" //  label="支付行号"
              label={t("form.PaymentbankNo")}
            >
              <Select
                bordered={false}
                showArrow={false}
                // placeholder="请输入支付行号"
                allowClear
              >
                {publicData.CardType.map((district) => (
                  <Option key={district.value}>{district.name}</Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name="detailAddress"
              label="SWIFTCODE"
              rules={[
                {
                  required: true,
                  // message: "请输入详细地址",
                },
              ]}
            >
              <Input
                bordered={false}
                style={{
                  width: "100%",
                }}
                allowClear
                placeholder="请输入详细地址"
              />
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={24}>
          <Col span={6}>
            <Form.Item
              name="transferAmount"
              label={t("form.changetrainsShops")}
              // label="中转行支付行号"
            >
              <Input
                bordered={false}
                style={{
                  width: "100%",
                }}
                allowClear
                // placeholder="请输入中转行支付行号"
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name="detailAddress"
              // label="开户银行地址"
              label={t("form.Addressdepositbank")}
              rules={[
                {
                  //   required: true,
                  // message: "请输入详细地址",
                },
              ]}
            >
              <Input
                bordered={false}
                style={{
                  width: "100%",
                }}
                allowClear
                // placeholder="请输入开户银行地址"
              />
            </Form.Item>
          </Col>

          <Col span={6}>
            <Form.Item
              name="transferAmount"
              label={t("form.Customeraddress")}
              // label="客户地址"
            >
              <Input
                bordered={false}
                style={{
                  width: "100%",
                }}
                allowClear
                // placeholder="请输入客户地址"
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name="detailA2ddress"
              label={t("form.PhoneinJapan")}
              // label="联系电话(日本必填)"
              rules={[
                {
                  required: true,
                  // message: "请输入联系电话",
                },
              ]}
            >
              <Input
                bordered={false}
                style={{
                  width: "100%",
                }}
                allowClear
                // placeholder="请输入联系电话"
              />
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={24}>
          <Col span={6}>
            <Form.Item
              name="accountCountry"
              //   validateStatus="error"
              //   help="上传材料不得超过8M"
              rules={[
                {
                  required: true,
                },
              ]}
              label={t("form.upload")}
              // label="上传材料"
            >
              <Upload
                name="avatar"
                //   listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                //   beforeUpload={beforeUpload}
                //   onChange={handleChange}
              >
                {uploadButton}
              </Upload>
            </Form.Item>
          </Col>
          <Col span={6}></Col>

          <Col span={6}></Col>
          <Col span={6}></Col>
        </Row>
      </Form>
      <Divider orientation="left" orientationMargin="-5px">
        {t("form.Otherinformation")}
      </Divider>
    </Drawer>
  );
}
